<template>
  <div class="user">
    <!-- 第一部分 -->
    <div>
      <div>
        <van-image
          round
          width="5rem"
          height="5rem"
          v-if="uname == null"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-image
          round
          width="5rem"
          height="5rem"
          v-else
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <span v-if="uname == null">西湖掌上游</span>
        <span v-else>{{ user_name }}</span>
      </div>
      <div v-if="uname == null">
        <router-link to="/login">登录</router-link>
        <span>|</span>
        <router-link to="/register">注册</router-link>
      </div>
      <div v-else>
        <a>欢迎：{{ uname }}</a>
        <span>|</span>
        <button @click="$store.commit('updateUname', null)">退出</button>
      </div>
    </div>
    <!-- 第二部分 -->
    <div>
      <van-grid>
        <van-grid-item
          icon="photo-o"
          text="我的预约"
          to="/sciencesDetail/order"
        />
        <van-grid-item icon="coupon" text="我的门票" />
        <van-grid-item icon="photo-o" text="我的卡包" />
        <van-grid-item icon="photo-o" text="停车预约" />
      </van-grid>
    </div>
    <!-- 第三部分 -->
    <div>
      <van-cell title="我的收藏" icon="like-o" is-link to="" />
      <van-cell title="我的藕粉圈" icon="fire-o" is-link to="/estimate" />
      <van-cell title="常用信息" icon="notes-o" is-link to="" />
      <van-cell title="我的讲解预约" icon="bullhorn-o" is-link to="" />
      <van-cell title="导游申请" icon="aim-o" is-link to="" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["uname", "user_name"]),
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.user {
  height: 100vh;
  background-image: url("/public/img/user/login-bg.png");
  position: relative;
  color: #333;
  > div:first-child {
    background-image: url("/public/img/user/bg2.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: 30vw;
    background-color: rgb(243, 241, 241);
    width: 94vw;
    height: 50vw;
    border-start-start-radius: 8px;
    border-start-end-radius: 8px;
    position: absolute;
    top: 15vw;
    left: 3vw;

    > div:first-child {
      position: absolute;
      top: 5vw;
      left: 3vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        margin-top: 8px;
      }
    }
    > div:nth-child(2) {
      position: absolute;
      top: 5vw;
      right: 3vw;
    }
  }
  > div:nth-child(2) {
    width: 94vw;
    position: absolute;
    top: 65vw;
    left: 3vw;
  }
  > div:nth-child(3) {
    width: 94vw;
    position: absolute;
    top: 85vw;
    left: 3vw;
    background-color: #fff;
    border-radius: 5px;
    margin-top: 5vw;
  }
}
</style>
